<template>
    <div class="content">
       <div class="header-top"></div>
       <div class="mess-body flex-column-centerR">
            <!-- 头部卡片 -->
            <div class="user-card">
                <div class="avater-box">
                    <img class="avater-img" :src="userData && userData.userImg ? userData.userImg:''" alt="">
                </div>
                <div class="uaerName-box">
                    <div class="userName">{{ userData && userData.userName }}</div>
                    <div class="contractedStatus">{{ userData && userData.contractedStatus?'已签约':'未签约' }}</div>
                </div>
               <div class="menu-top">
                <grid :column-num="4" :border="false" >
                    <grid-item v-for="(item,index) in menuTop" :key="index" >
                       <div class="menu-box">
                            <div class="menu-img felx-row-centerAll">
                                <img class="menu-icon" :src="item.icon" alt="">
                            </div>
                            <div class="menu-name">{{ item.menuName }}</div>
                       </div>
                    </grid-item>
                </grid>
               </div>
            </div>
             <!-- 个人信息部分 -->
            <div class="userInfo-box w-p-9 flex-column-centerR">
                    <div class="w-p-10">个人信息</div>
                    <div class="mess-box w-p-10 flex-column-centerR">
                        <div class="mess-list w-p-9 flex-row-centerC">
                            <div class="list-left w-p-3">身份证号</div>
                            <div class="list-right w-p-7">{{ userData && userData.cardId }}</div>
                        </div>
                        <div class="mess-list w-p-9 flex-row-centerC">
                            <div class="list-left w-p-3">性别</div>
                            <div class="list-right w-p-7">{{ userData && userData.gender }}</div>
                        </div>
                        <div class="mess-list w-p-9 flex-row-centerC">
                            <div class="list-left w-p-3">年龄</div>
                            <div class="list-right w-p-7">{{ userData && userData.age }}</div>
                        </div>
                        <div class="mess-list w-p-9 flex-row-centerC">
                            <div class="list-left w-p-3">联系电话</div>
                            <div class="list-right w-p-7">{{ userData && userData.phone }}</div>
                        </div>
                        <div class="mess-list w-p-9 flex-row-centerC">
                            <div class="list-left w-p-3">现居地</div>
                            <div class="list-right w-p-7">{{ userData && userData.address }}</div>
                        </div>
                        <div class="mess-list w-p-9 flex-row-centerC">
                            <div class="list-left w-p-3">居民来源</div>
                            <div class="list-right w-p-7">{{ userData && userData.source }}</div>
                        </div>
                        <div class="mess-list w-p-9 flex-row-centerC">
                            <div class="list-left w-p-3">疾病档案</div>
                            <div class="list-right w-p-7 flex-row">
                                <div class="arItem" v-for="(item,index) in (userData && userData.lable)" :style="{ color: item.color, backgroundColor: item.bgColor,border:`1px solid `+item.color }" :key="index">{{ item.text }}</div>
                            </div>
                        </div>
                    </div>
                    
            </div>
            <div class="userInfo-box w-p-9 flex-column-centerR" style="margin-top: 30px;">
                <div class="w-p-10">家庭成员</div>
                <div class="mess-box w-p-10">
                    <Grid :column-num="2" :border="false">
                        <GridItem v-for="(item,index) in (familyMember && familyMember)" :key="index">
                            <div class="family-member-box flex-row-sa w-p-10">
                                <div class="member-img w-p-3">
                                    <img :src="item.img" alt="">
                                </div>
                                <div class="member-name w-p-4 flex-column-sa">
                                    <div class="flex-row-sbt w-p-10">
                                        <div class="ft-14 ft-w">{{ item.memberName }}</div>
                                        <div class="ft-14">{{item.age}}岁</div>
                                    </div>
                                    <div class="ft-12 flex-row">关系：{{ item.relationship }}</div>
                                </div>
                                <div class="member-genderImg w-p-2">
                                    <img :src="item.gender==='女'? gender_woman:gender_man" alt="">
                                </div>
                            </div>
                        </GridItem>
                    </Grid>
                </div>
            </div>

            <div class="btn w-p-9">添加服务</div>
       </div>
      
    </div>
</template>

<script lang="ts" setup>
    import 'vant/lib/index.css';
    import { Grid, GridItem } from 'vant';
    import { reactive,ref,onMounted} from 'vue';
    import icon_1 from '../../assets/icon/icon_1.png'
    import icon_2 from '../../assets/icon/icon_2.png'
    import icon_3 from '../../assets/icon/icon_3.png'
    import icon_4 from '../../assets/icon/icon_4.png'

    import gender_man from '../../assets/icon/man.png'
    import gender_woman from '../../assets/icon/woman.png'

    import * as api from '../../api/index.ts';
    let userData: any = ref(null);
    let familyMember:any = ref(null)
    
    // 使用 reactive 创建响应式数据 静态数据结构，当前未启用
    //const userInfoStatic = reactive({ userName: '翟枫君', contractedStatus: true, cardId: '1234567890123456', gender: '女', age: '26', phone: '12345678911', address: '广东省佛山市南海区大沥镇五一村3号', source: '医生建档', lable: [{ color: '#49b9ad', text: '高血压', bgColor: '#eafefa' }, { color: '#fca382', text: '低血糖', bgColor: '#fff2e8' }] });
    //const familyMemberStatic = reactive([{memberName:'韦栋',age:'58',relationship:'母亲',gender:'女',img:user_icon_1},{memberName:'布馨昭',age:'60',relationship:'父亲',gender:'男',img:user_icon_2}])
    const menuTop = reactive([{ icon: icon_1, menuName: '健康档案' }, { icon: icon_2, menuName: '健康记录' }, { icon: icon_3, menuName: '签约信息' }, { icon: icon_4, menuName: '服务记录' }])
    // 生命周期钩子函数
    onMounted(async () => { 
        try {
            const res = await api.getUser();
            console.log(res)
            userData.value = res.user.userInfo;
            familyMember =res.user.userFamilyMembers
        } catch (err) {
            console.error(err);
        } finally {
            // console.log('请求结束');
        }
    })  
</script>

<style lang="scss" scoped>
.header-top{
    width: 100%;
    height: 230px;
    background-color: #49b9ad;
}
.mess-body{
    // background-color: #49b9ad;
    .user-card{ 
        width: 90%;
        height: 185px;
        border-radius: 10px;
        position: relative;
        // z-index: 10;
        top: -70px;
        margin: 0 auto;
        background-color: #ffffff;
        display: flex;
        justify-content: center;
        .avater-box{
            width: 80px;
            height: 80px;
            position: absolute;
            top: -45px;
            margin: 0 auto;
            overflow: hidden;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ffffff;
            .avater-img{
                width: 75px;
                height: 75px;
                border-radius: 50%;

            }
        }
        .uaerName-box{
            position: absolute;
            top:50px;
            .contractedStatus{
                margin-top: 5px;
                font-size: 10px;
                padding: 3px;
                border-radius: 6px;
                border:1px solid #49b9ad;
                color: #49b9ad;
                text-align: center;
                background-color: rgba($color: #eafefa, $alpha: 1);
            }

        }
        .menu-top{
            width: 100%;
            height: 75px;
            overflow: hidden;
            position: absolute;
            bottom: 10px;
            // top: 10px;
            .menu-box{
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 10px;
                .menu-img{
                    width: 40px;
                    height: 40px;
                    .menu-icon{
                        width: 25px;
                        height: 25px;;
                    }
                }
            }
        }
    }
    .userInfo-box{
        margin-top: -40px;
        font-size: 15px;
       .mess-box{
         margin-top: 20px;
         padding: 10px 0;
         background-color: #ffffff;
         border-radius: 20px;
         .mess-list{
            height:55px;
            font-size: 13px;
            border-bottom: 1px solid #eeeeee;
            .arItem{
                margin: 0 10px;
                padding: 5px;
                border-radius: 5px;
                font-size: 10px;
            }
        }
        .family-member-box{
            background-color: #f5f7fb;
            padding: 10px 0;
            border-radius: 10px;
            .member-img{
                img{
                    width: 50px;
                    height: 50px;
                    border-radius: 50%;

                }
            }
            .member-genderImg{
                img{
                    width: 16px;
                    height: 16px;
                }
            }
        }
       }
    }
    .btn{
        margin: 30px 0;
        padding: 12px 0;
        border-radius: 12px;
        text-align: center;
        background-color: #49b9ad;
        color: #ffffff;
    }
}



</style>